<template>
  <!-- 无卡减款 -->
  <div class="user-info">
    <div class="all_main">
      <dragdrop :width="0" :widthLeft="'130px'">
        <template slot="left">
          <div class="all_left">
            <div class="grid-content bg-purple">
              <div class="header_title">
                <span>部门列表</span>
              </div>
              <div class="department_tree">
                <el-tree
                  :data="deptTree"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                  :expand-on-click-node="false"
                  :highlight-current="true"
                  :indent="1"
                   node-key="pkDepartmentId"
                  :default-expanded-keys="idArr"
                ></el-tree>
              </div>
            </div>
          </div>
        </template>
        <template slot="right">
          <div class="all_right">
            <div class="grid-content bg-purple">
              <div class="header_title">
                <span>人员列表</span>
              </div>
            
              <el-form :inline="true" :model="elform" size="mini" ref="elform" class="form">
                <el-form-item label="姓名:">
                  <el-input
                    placeholder="用户姓名"
                    v-model="userName"
                    clearable
                    size="mini"
                  ></el-input>
                </el-form-item>
                <el-form-item label="编号:">
                  <el-input
                    placeholder="用户编号"
                    v-model="userNumber"
                    clearable
                    size="mini"
                  ></el-input>
                </el-form-item>
                <el-form-item label="卡号:">
                  <el-input
                    placeholder="卡号"
                    v-model="cardNumber"
                    clearable
                    size="mini"
                  ></el-input>
                </el-form-item>
                <el-form-item>
              <el-button type="primary" @click="gotosearch()" size="mini">查询</el-button>
               
               
                  <el-button type="primary" @click="exportexeclto()" size="mini">导出</el-button>
                   
               
                  <el-button @click="openImportDialog()" type="primary" size="mini">导入</el-button>
                   
               
                  <el-button type="primary" @click="resetfilter()" size="mini">重置条件</el-button>
                  <el-button type="primary" @click="cardLoss('all')" size="mini">批量减款</el-button>
                 <el-popover placement="top" width="500" trigger="click">
                    <div>
                      <el-row>
                        <el-checkbox
                          style="width: 10%"
                          :label="formThead.userName.label"
                          v-model="formThead.userName.checked"
                          @change="checkboxChanged()"
                          margin-right:10px
                        ></el-checkbox>
                        <el-checkbox
                          style="width: 10%"
                          :label="formThead.userNumber.label"
                          v-model="formThead.userNumber.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width: 10%"
                          :label="formThead.cardNumber.label"
                          v-model="formThead.cardNumber.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width: 10%"
                          :label="formThead.userSexStr.label"
                          v-model="formThead.userSexStr.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                      </el-row>
                      <el-row>
                        <el-checkbox
                          style="width: 10%"
                          :label="formThead.departmentName.label"
                          v-model="formThead.departmentName.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>

                        <el-checkbox
                          style="width: 10%"
                          :label="formThead.idCard.label"
                          v-model="formThead.idCard.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width: 10%"
                          :label="formThead.birthday.label"
                          v-model="formThead.birthday.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width: 10%"
                          :label="formThead.phoneNumber.label"
                          v-model="formThead.phoneNumber.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                      </el-row>
                      <el-row>
                        <el-checkbox
                          style="width: 10%"
                          :label="formThead.regTime.label"
                          v-model="formThead.regTime.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                      </el-row>
                    </div>
                    <el-button type="primary" slot="reference" size="mini">自定义显示列</el-button>
                  </el-popover>
                </el-form-item>
              </el-form>
              <el-table
                :data="tableData"
                border
                row-key="id"
                :header-cell-style="headFirst"
                @selection-change="handleSelectionChange"
                ref="tableData"
                :cell-style="(res) => headFirst_col(res, [])"
              >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column
                  :label="formThead.userName.label"
                  :prop="formThead.userName.prop"
                  v-if="formThead.userName.checked"
                ></el-table-column>
                <el-table-column
                  :label="formThead.userNumber.label"
                  :prop="formThead.userNumber.prop"
                  v-if="formThead.userNumber.checked"
                  min-width="100px"
                ></el-table-column>
                <el-table-column
                  :label="formThead.cardNumber.label"
                  :prop="formThead.cardNumber.prop"
                  v-if="formThead.cardNumber.checked"
                  min-width="100px"
                ></el-table-column>
                <el-table-column
                  :label="formThead.departmentName.label"
                  :prop="formThead.departmentName.prop"
                  v-if="formThead.departmentName.checked"
                  min-width="120px"
                ></el-table-column>
                <el-table-column
                  :label="formThead.userSexStr.label"
                  :prop="formThead.userSexStr.prop"
                  v-if="formThead.userSexStr.checked"
                >
                  <template slot-scope="scope">
                    {{
                    scope.row.userSex | filtersex
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  :label="formThead.birthday.label"
                  :prop="formThead.birthday.prop"
                  v-if="formThead.birthday.checked"
                  min-width="94px"
                ></el-table-column>
                <el-table-column
                  :label="formThead.idCard.label"
                  :prop="formThead.idCard.prop"
                  v-if="formThead.idCard.checked"
                  min-width="160px"
                ></el-table-column>

                <el-table-column
                  :label="formThead.phoneNumber.label"
                  :prop="formThead.phoneNumber.prop"
                  v-if="formThead.phoneNumber.checked"
                  min-width="110px"
                ></el-table-column>

                <el-table-column
                  :label="formThead.regTime.label"
                  :prop="formThead.regTime.prop"
                  v-if="formThead.regTime.checked"
                  min-width="154px"
                ></el-table-column>

                <el-table-column label="操作" aling="center" v-if="isauth('user_edit')">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      v-if="scope.row.cardNumber"
                      @click="cardLoss(scope.row, 1)"
                    >减款</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <div class="page">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChangepage"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 40, 60, 80]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="recordCount"
                ></el-pagination>
              </div>
            </div>
          </div>
        </template>
      </dragdrop>
    </div>
    <!-- 减款弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="subscribe"
      width="500px"
      center
      :close-on-click-modal="false"
      :before-close="closeDialog"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="margin-left: 20%"
      >
        <el-form-item label="减款详情:" v-if="isAll">
          <el-col :span="24">
            <b>
              本次选择{{ changeStuList.length }}人,减款合计为{{
              changeStuList.length * ruleForm.rechargeamount
              }}元
            </b>
          </el-col>
        </el-form-item>
        <el-form-item label="姓名:" v-if="!isAll">
          <el-col :span="24">
            <b>{{ userInfo.userName }}</b>
          </el-col>
        </el-form-item>
        <el-form-item label="减款钱包:" prop="WalletNo">
          <el-col :span="15">
            <el-select v-model="ruleForm.WalletNo" placeholder="请选择" size="mini">
              <el-option
                v-for="item in paylist"
                :key="item.walletNo"
                :label="item.walletName"
                :value="item.walletNo"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="减款类型:" prop="deductionTypeId">
          <el-col :span="15">
            <el-select v-model="ruleForm.deductionTypeId" placeholder="请选择" size="mini">
              <el-option
                v-for="item in deductionlist"
                :key="item.pkTypeId"
                :label="item.typeName"
                :value="item.pkTypeId"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="减款金额:" prop="rechargeamount">
          <el-input-number
            size="mini"
            v-model="ruleForm.rechargeamount"
            :precision="1"
            :step="10"
            :min="0"
          ></el-input-number>元
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="subscribeAdd()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 导入 -->
    <rechargeDeductionImport
      v-if="rechargeDeductionImportVisible"
      ref="rechargeDeductionImport"
      :deductionType="1"
    ></rechargeDeductionImport>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import { JSEncrypt } from 'jsencrypt'
import qs from 'qs'
import { Loading } from 'element-ui'
import axios from 'axios'
import rechargeDeductionImport from './recharge-deduction-import'

export default {
  data() {
    return {
      elform:{},
      /**
       * 导入相关
       */
      rechargeDeductionImportVisible: false,
      title: '无卡减款',
      // 钱包列表选项
      paylist: [],
      // 弹框显示
      subscribe: false,
      ruleForm: {
        // 金额
        rechargeamount: '',
        // 钱包号
        WalletNo: '',
        // 减款类型
        deductionTypeId: ''
      },
      // 选中减款的学生
      changeStuList: [],
      // 减款类型
      deductionlist: [],
      // 是否批量多选
      isAll: false,
      // 防止重复提交(节流操作)
      isOk: true,
      userInfo: {},
      rules: {
        rechargeamount: [
          { required: true, message: '请输入金额', trigger: 'blur' }
        ],
        WalletNo: [
          { required: true, message: '请选择钱包号', trigger: 'blur' }
        ],
        deductionTypeId: [
          { required: true, message: '请选择减款类型', trigger: 'blur' }
        ]
      },
      changeschoolid: '',
      administrator: '',
      pageSize: 20,
      pageNum: 1,
      currentPage: 1,
      recordCount: 0,
      sortName: '',
      defaultExpandAll: true,

      custom: false,
      departmentGuid: '',
      userName: '',
      userNumber: '',
      cardNumber: '',
      defaultProps: {
        children: 'children',
        label: 'departmentName'
      },
      formThead: {
        userName: { label: '姓名', prop: 'userName', checked: true },
        userNumber: { label: '人员编号', prop: 'userNumber', checked: true },
        cardNumber: { label: '卡号', prop: 'cardNumber', checked: true },
        departmentName: {
          label: '部门',
          prop: 'departmentName',
          checked: true
        },
        userSexStr: { label: '性别', prop: 'userSex', checked: true },
        birthday: { label: '出生日期', prop: 'birthday', checked: true },
        idCard: { label: '身份证号', prop: 'idCard', checked: false },
        phoneNumber: { label: '手机号', prop: 'phoneNumber', checked: true },
        regTime: { label: '注册时间', prop: 'regTime', checked: false }
      },
      tableData: [],
      deptTree: [],
      idArr: [null],
      departmentName: [],
      dataTree: []
    }
  },
  components: {
    rechargeDeductionImport
  },
  created() {
    this.changeschoolid = this.$store.state.user.changeschoolid
    this.administrator = sessionStorage.getItem('administrator')
    this.custom = true
  },
  mounted() {
    this.getDeptTree()
    this.getDataTree()
    this.loadCol()
    // console.log(this.changeschoolid);
  },
  methods: {
    /**
     * 导入
     */
    openImportDialog() {
      this.rechargeDeductionImportVisible = true
      this.$nextTick(() => {
        this.$refs.rechargeDeductionImport.showImportDialog()
      })
    },
    // 获取无卡减款类型
    getConType() {
      this.$http({
        url: this.$http.adornUrl('/unit/deduction-type-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.deductionlist = data.messageContent
          if (this.deductionlist.length != 0) {
            this.ruleForm.deductionTypeId = this.deductionlist[0].pkTypeId
          }
        } else {
          this.$message({
            showClose: true,
            message: data.errorMessage,
            type: 'error'
          })
        }
      })
    },
    // 选中学生
    handleSelectionChange(val) {
      this.changeStuList = val
    },
    // 获取钱包
    getPayNumber() {
      this.paylist = []
      this.platformWalletlist = []
      this.$http({
        url: this.$http.adornUrl('/unit/unit-wallet-info-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          data.messageContent.map(item => {
            if (Number(item.walletNo) != 100) {
              this.paylist.push(item)
            } else {
              this.platformWalletlist.push(item)
            }
          })
          if (this.paylist.length != 0) {
            this.ruleForm.WalletNo = this.paylist[0].walletNo
          }
        } else {
          this.$message({
            showClose: true,
            message: data.errorMessage,
            type: 'error'
          })
        }
      })
    },
    // 减款弹窗
    cardLoss(row) {
      this.isAll = false
      this.userInfo = {}
      if (row == 'all') {
        if (this.changeStuList == 0) {
          this.$message({
            message: '请选择需要批量减款的学生',
            type: 'warning'
          })
          return false
        }
        this.isAll = true
      } else {
        this.userInfo = row
      }
      this.subscribe = true
      this.$nextTick(() => {
        // 获取钱包列表
        this.getPayNumber()
        this.getConType()
        console.log(this.ruleForm)
        this.$refs['ruleForm'].resetFields()
      })
    },
    // 取消减款弹窗
    closeDialog() {
      if (this.isOk) {
        this.subscribe = false
      } else {
        this.$message({
          message: '正在减款中,请勿关闭窗口',
          type: 'warning'
        })
      }
    },
    // 确定减款弹窗
    subscribeAdd() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.ruleForm.rechargeamount == 0) {
            this.$message({
              message: '减款金额不能为0',
              type: 'warning'
            })
            return
          }
          if (!this.isOk) {
            this.$message({
              message: '正在减款中,请勿重复操作',
              type: 'warning'
            })
            return
          }
          this.isOk = false
          // 批量加载条
          this.loading = Loading.service({
            lock: true,
            text: '正在减款中,请耐心等待...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          // 是否批量减款
          if (this.isAll) {
            this.setUpCardNumberAll()
          } else {
            // 减款
            this.setUpCardNumberA()
          }
        }
      })
    },

    // 减款
    setUpCardNumberA() {
      /** adjustType; 1充值 4减款*/
      let messageContent = {
        adjustType: 4,
        cardNumber: this.userInfo.cardNumber,
        logicalCardNumber: this.userInfo.logicalCardNumber,
        rechargeAmount: this.ruleForm.rechargeamount * 100,
        unitGuid: this.changeschoolid,
        userGuid: this.userInfo.userGuid,
        walletNo: this.ruleForm.WalletNo,
        deductionTypeId: this.ruleForm.deductionTypeId
      }
      this.$http({
        url: this.$http.adornUrl('/card/ready-money-recharge'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: messageContent,
          messageType: 0
        }),
        timeout: this.timeout
      })
        .then(({ data }) => {
          // 关闭加载条
          this.loading.close()
          // 节流操作
          let clearTime = setTimeout(() => {
            this.isOk = true
            clearTimeout(clearTime)
            clearTime = null
          }, 1000)
          if (data.messageCode == 200) {
            this.$message({
              message: '减款成功',
              type: 'success'
            })
            this.subscribe = false
            this.initpage()
          } else {
            this.$message.error(data.errorMessage)
            return
          }
        })
        .catch(err => {
          // 关闭加载条
          this.loading.close()
          this.$message({
            showClose: true,
            message: '请求超时,请到充值管理中查看是否成功',
            type: 'warning',
            duration: 0
          })
          this.isOk = true
          this.subscribe = false
          this.initpage()
        })
    },

    // 批量减款
    setUpCardNumberAll() {
      let dataList = this.changeStuList.map(item => {
        return {
          cardNumber: item.cardNumber,
          logicalCardNumber: item.logicalCardNumber,
          userGuid: item.userGuid,
          userName: item.userName,
          departmentName: item.departmentName
        }
      })
      /** adjustType; 1减款 4减款*/
      let messageContent = {
        adjustType: 4,
        dataList: dataList,
        rechargeAmount: this.ruleForm.rechargeamount * 100,
        unitGuid: this.changeschoolid,
        walletNo: this.ruleForm.WalletNo,
        deductionTypeId: this.ruleForm.deductionTypeId
      }
      this.$http({
        url: this.$http.adornUrl('/card/ready-money-recharge-batch'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: messageContent,
          messageType: 0
        }),
        timeout: this.timeout
      })
        .then(({ data }) => {
          // 关闭加载条
          this.loading.close()
          // 节流操作
          let clearTime = setTimeout(() => {
            this.isOk = true
            clearTimeout(clearTime)
            clearTime = null
          }, 1000)
          if (data.messageCode == 200) {
            this.$message({
              message: '批量减款成功',
              type: 'success'
            })
            // 导出结果
            this.export2Excel(data.messageContent)
            this.subscribe = false
            this.initpage()
          } else {
            this.$message.error(data.errorMessage)
            return
          }
        })
        .catch(err => {
          // 关闭加载条
          this.loading.close()
          this.$message({
            showClose: true,
            message: '请求超时,请到充值管理中查看是否成功',
            type: 'warning',
            duration: 0
          })
          this.isOk = true
          this.subscribe = false
          this.initpage()
        })
    },
    // 批量减款数据反馈
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    export2Excel(agentlistout) {
      agentlistout.map(item => {
        item.rechargeAmount = item.rechargeAmount / 100
      })
      const nowtime = this.getimeto()
      require.ensure([], () => {
        let multiHeader = []
        let merges = []
        const tHeader = ['部门名称', '姓名', '卡号', '减款金额(元)', '减款结果']
        const filterValArr = [
          'departmentName',
          'userName',
          'cardNumber',
          'rechargeAmount',
          'content'
        ]

        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const filterVal = filterValArr
        const list = agentlistout
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          merges,
          filename: '批量减款情况表' + this.getimeto(),
          tableheader: '1'
        })
      })
    },

    //多选框修改事件
    checkboxChanged() {
      //保存用户自定义列
      localStorage.setItem('customUser', JSON.stringify(this.formThead))
      this.$nextTick(() => {
        this.$refs['tableData'].doLayout()
      })
      // console.log(localStorage.getItem('customUser'));
    },
    //初次加载列
    loadCol() {
      if (localStorage.getItem('customUser')) {
        let tempThead = JSON.parse(JSON.stringify(this.formThead))
        //自定义用户列已经编辑过
        // console.log(localStorage.getItem('customUser'));
        let arr = Object.keys(this.formThead)
        let arr1 = Object.keys(JSON.parse(localStorage.getItem('customUser')))
        if (JSON.stringify(arr) == JSON.stringify(arr1)) {
          this.formThead = JSON.parse(localStorage.getItem('customUser'))
        } else {
          this.formThead = tempThead
        }
      }
    },

    //递归增加各节点name，并且删除type为'room'的children
    recursiveRoom(dataTree) {
      for (var i in dataTree) {
        dataTree[i].value = dataTree[i].name
        if (dataTree[i].type == 'room') {
          delete dataTree[i].children
        }
        if (dataTree[i].children) {
          this.recursiveRoom(dataTree[i].children)
        }
      }
    },
    //获取区域楼栋房间树信息
    getDataTree() {
      this.$http({
        url: this.$http.adornUrl('/area/room/get-area-room-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.administrator
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode === 200) {
          this.dataTree = data.messageContent
          this.recursiveRoom(this.dataTree)
          // console.log(JSON.stringify(this.dataTree));
        }
      })
    },
    // 条件查询用户信息
    gotosearch() {
      // 重置搜索页数
      this.pageNum = 1
      this.initpage()
    },
    //重置查询条件
    resetfilter() {
      this.userName = ''
      this.userNumber = ''
      this.cardNumber = ''
    },

    // 部门树节点点击
    handleNodeClick(data) {
      this.departmentGuid = data.departmentGuid
      this.departmentName = data.departmentName
      this.pageNum = 1
      this.initpage()
    },
    // 部门树
    getDeptTree() {
      this.$http({
        url: this.$http.adornUrl('/department/select-department-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
          messageType: 0
        })
      }).then(({ data }) => {
        // console.log(data.messageContent);
        if (data.messageCode == 200) {
          this.deptTree = data.messageContent
          this.recursiveget(this.deptTree)
          // this.idArr = []
          // this.getId(this.deptTree)
          // console.log(JSON.stringify(this.deptTree));
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //递归添加
    recursiveget(deptTree) {
      for (var i in deptTree) {
        deptTree[i].value = deptTree[i].departmentGuid
        deptTree[i].label = deptTree[i].departmentName
        if (deptTree[i].children.length == 0) {
          delete deptTree[i].children
        } else {
          this.recursiveget(deptTree[i].children)
        }
      }
    },
    //获取递归id
    getId(deptTree) {
      deptTree.forEach(ele => {
        if (ele.flag == true) {
          this.idArr.push(ele.id)
          if (ele.children && ele.children.length > 0) {
            this.getId(ele.children)
          }
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.initpage()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.initpage()
    },
    // 初始化人事资料页面
    initpage() {
      // 终止上一次请求
      if (typeof this.cancel === 'function') {
        this.cancel()
      }
      // 取消请求函数
      let CancelToken = axios.CancelToken
      this.$http({
        url: this.$http.adornUrl('/card/user-card-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: {
              departmentGuid: this.departmentGuid,
              unitGuid: this.changeschoolid,
              cardNumber: this.cardNumber,
              userName: this.userName,
              userNumber: this.userNumber
            },
            sortName: this.sortName
          },
          messageType: 0
        }),
        // 取消请求对象// 这个参数 c 就是CancelToken构造函数里面自带的取消请求的函数，这里把该函数当参数用 })
        cancelToken: new CancelToken(c => {
          this.cancel = c
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.tableData = data.messageContent.data
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          this.tableData.forEach(item => {
            if (item.userSex === 0) {
              this.$set(item, 'userSexStr', '男')
            } else {
              this.$set(item, 'userSexStr', '女')
            }
          })
          // console.log(this.tableData);
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    /**
     * 用户信息导出
     */
    async exportexeclto(type) {
      if (this.tableData.length == 0) {
        this.$message({
          message: '请查询数据后在进行操作',
          type: 'warning'
        })
        return false
      }
      this.agentlistout = await this.outexecel()
      this.exportExcel()
    },
    outexecel() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl('/card/user-card-page'),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                asc: true,
                pageNum: 1,
                pageSize: _this.recordCount,
                searchInfo: {
                  departmentGuid: _this.departmentGuid,
                  unitGuid: _this.changeschoolid,
                  cardNumber: _this.cardNumber,
                  userName: _this.userName,
                  userNumber: _this.userNumber
                },
                sortName: _this.sortName
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.outexecelList = data.messageContent.data
              _this.outexecelList.forEach(item => {
                if (item.userSex === 0) {
                  _this.$set(item, 'userSexStr', '男')
                } else {
                  _this.$set(item, 'userSexStr', '女')
                }
              })
              resolve(_this.outexecelList)
            } else {
              _this.$message.error(data.errorMessage)

              reject(data.errorMessage)
            }
          })
      })
    },
    exportExcel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        let multiHeader = []
        let merges = []
        const tHeader = ['姓名', '卡号', '减款金额(元)']
        const filterValArr = ['userName', 'cardNumber', 'rechargeAmount']

        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const filterVal = filterValArr
        const list = this.outexecelList
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          merges,
          filename: '批量减款人员信息表' + this.getimeto(),
          tableheader: '1'
        })
      })
    }
  },
  filters: {
    filtersex: function(sex) {
      if (sex == '0') {
        return '男'
      } else if (sex == '1') {
        return '女'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user-info {
  /deep/.el-dialog--center .el-dialog__body {
    padding: 20px 0;
    margin: 0 auto;
  }
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .all_main {
    height: 100%;
    .header_title {
      white-space:nowrap;
      padding: 20px 0;
      font-weight: bolder;
      text-align: left;
      border-bottom: 1px solid #e5e9f2;
      color: #909399;
    }
    .all_left {
      height: 100%;
      .bg-purple {
        height: 100%;
        // overflow-x: scroll;
        // white-space: nowrap;
        .header_title {
          padding: 20px 0;
          font-weight: bolder;
          text-align: center;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
          overflow: hidden;
        }
        .department_tree {
          // width: 250px;
          height: calc(100vh - 190px);
          overflow-y: auto;
          &::-webkit-scrollbar {
            width: 0;
            height: 0;
            background-color: transparent;
          }
          padding-top: 10px;
          font-weight: bolder;
          .custom-tree-node {
            padding-left: 10px;
            font-size: 15px;
            .colorfont {
              color: DeepSkyBlue;
            }
          }
        }
      }
    }
    .all_right {
      /deep/.el-button + .el-button {
        margin: 0 6px;
      }
      .el-table__body-wrapper .is-scrolling-left {
        height: 500px;
      }
      height: calc(100vh - 140px);
      overflow: auto;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }
      .bg-purple {
        height: 100%;
        .header_title {
          padding: 10px 0 20px 0;
          font-weight: bolder;
          text-align: center;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
        }
        .el-table th {
          height: 100%;
          display: table-cell !important;
        }
        .page {
          padding-bottom: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .form {
          padding-top: 10px;
        }
        /deep/.el-form-item--mini.el-form-item,
        .el-form-item--small.el-form-item {
          margin-bottom: 5px;
        }
      }
    }
  }
}
.grid-content.bg-purple.aa {
  margin-left: -85px !important;
}
</style>